import { Link } from 'react-router-dom';
import { FacebookIcon, InstagramIcon, YoutubeIcon } from 'lucide-react';

// X (formerly Twitter) icon component
function XIcon({ size = 20 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
    </svg>
  );
}
export function Footer() {
  const categories = [{
    name: 'Kitchen',
    links: ['Refrigerators', 'Ovens', 'Dishwashers', 'Coffee Makers']
  }, {
    name: 'Laundry',
    links: ['Washing Machines', 'Dryers', 'Steam Closets']
  }, {
    name: 'Climate',
    links: ['Air Conditioners', 'Air Purifiers', 'Smart Thermostats']
  }, {
    name: 'Security',
    links: ['Smart Locks', 'Cameras', 'Sensors']
  }];
  const policies = [{
    name: 'Privacy Policy',
    path: '/privacy'
  }, {
    name: 'Terms of Service',
    path: '/terms'
  }, {
    name: 'Cookie Policy',
    path: '/privacy#cookies'
  }, {
    name: 'About Us',
    path: '/about'
  }, {
    name: 'Contact',
    path: '/contact'
  }];
  return <footer className="bg-[#343a40] text-white pt-12 pb-8">
      <div className="container mx-auto px-4">
        {/* Trust badges */}
        <div className="mb-10 py-4 border-b border-gray-600">
          <p className="text-center text-sm text-gray-300 mb-4">FEATURED IN</p>
          <div className="flex flex-wrap justify-center gap-8">
            {['Forbes', 'TechCrunch', 'HGTV', 'Good Housekeeping', 'CNET'].map(media => <span key={media} className="text-gray-200 font-semibold">
                  {media}
                </span>)}
          </div>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-10">
          {categories.map(category => <div key={category.name}>
              <h4 className="font-semibold mb-4 text-lg">{category.name}</h4>
              <ul className="space-y-2">
                {category.links.map(link => <li key={link}>
                    <a href="#" className="text-gray-300 hover:text-[#d4a373] transition-colors text-sm">
                      {link}
                    </a>
                  </li>)}
              </ul>
            </div>)}
        </div>
        {/* Newsletter */}
        <div className="bg-[#2b3035] p-6 rounded-lg mb-10">
          <div className="md:flex items-center justify-between">
            <div className="mb-4 md:mb-0 md:mr-8">
              <h4 className="font-bold text-lg mb-2">
                Get our Smart Home Planning Checklist
              </h4>
              <p className="text-gray-300 text-sm">
                Join our newsletter for exclusive guides and smart home tips
              </p>
            </div>
            <div className="flex">
              <input type="email" placeholder="Your email address" className="px-4 py-2 rounded-l-md text-gray-800 w-full md:w-64" />
              <button className="bg-[#d4a373] hover:bg-[#c99b6e] px-4 py-2 rounded-r-md font-medium transition-colors">
                Subscribe
              </button>
            </div>
          </div>
        </div>
        {/* Bottom footer */}
        <div className="pt-6 border-t border-gray-600">
          <div className="flex flex-col md:flex-row md:items-start justify-between">
            <div className="mb-4 md:mb-0 md:max-w-2xl">
              <Link to="/" className="text-xl font-bold">
                AppliancePicks
              </Link>
              <p className="text-sm text-gray-400 mt-1">
                © {new Date().getFullYear()} All rights reserved
              </p>
              <p className="text-xs text-gray-400 mt-2 leading-relaxed">
                AppliancePicks participates in affiliate programs and may earn commissions on purchases made through our links. This does not affect our review standards or recommendations.
              </p>
            </div>
            <div className="flex flex-col md:flex-row md:items-center">
              <div className="flex flex-wrap gap-4 mb-4 md:mb-0 md:mr-8">
                {policies.map(policy => (
                  <Link 
                    key={policy.name} 
                    to={policy.path} 
                    className="text-sm text-gray-300 hover:text-white transition-colors whitespace-nowrap"
                  >
                    {policy.name}
                  </Link>
                ))}
              </div>
              <div className="flex space-x-4">
                <a href="#" className="text-gray-300 hover:text-white">
                  <FacebookIcon size={20} />
                </a>
                <a href="#" className="text-gray-300 hover:text-white">
                  <XIcon size={20} />
                </a>
                <a href="#" className="text-gray-300 hover:text-white">
                  <InstagramIcon size={20} />
                </a>
                <a href="#" className="text-gray-300 hover:text-white">
                  <YoutubeIcon size={20} />
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>;
}